<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div{
			width: 300px;
			height: 200px;
		}
		div	img{
			width: 100%;
			height: 100%;
			transition: all 1s;
/*			filter: blur(10px);*/
/*			高斯模糊 数值越大越模糊*/
/*			filter:brightness(50%);*/
/*			明亮程度 数值越小 越暗*/
/*			filter: grayscale(0%);*/
/*			灰度 0% 正常 100% 黑白色*/
			filter: invert(80%);
/*			底片效果 反转输入图像 相机底片效果*/
		}
		div img:hover{
/*			filter: blur(0px);*/
/*			filter:brightness(100%);*/
/*			filter: grayscale(100%);*/
			filter: invert(0%);
			
		}
	</style>
</head>
<body>
	<div>
		<img src="../image/2.jpg">
	</div>
</body>
</html>